<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .main-box {
            width: 620px;
            outline: 2px solid red;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 20px auto;
            background: #F5F5F5;
        }

        .box {
            width: 300px;
            height: 350px;
            background-color: white;
            padding: 20px 10px;
            margin: 10px 0;
        }

        .box-content {
            position: relative;
            text-align: center;
        }

        .box-content img {
            width: 200px;
            cursor: pointer;
        }

        h3 {
            margin: 20px 0;
        }

        .box-bottom {
            display: flex;
            margin: 20px 0;
            font-size: 18px;
            align-items: center;
            justify-content: space-between;
        }

        .price {
            margin: 0 10px;
            color: orangered;
            font-weight: bolder;
        }

        .price span {
            font-size: 15px;
        }

        p:nth-of-type(2) {
            width: 50px;
            border-radius: 25px;
            border: 1px solid gray;
            margin: 0 10px;
            font-size: 15px;
        }

        p:nth-of-type(3) {
            width: 80px;
            border-radius: 25px;
            border: 1px solid gray;
            font-size: 15px;
        }

        .box-new {
            display: flex;
        }

        .del {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            position: absolute;
            right: 0;
            border: 1px solid gray;
            cursor: pointer;

        }

        .img {
            text-align: center;
            font-size: 20px;
            height: 250px;
            outline: 2px solid black;
            position: fixed;
            width: 100%;
            z-index: 10;
            background-color: aqua;

        }

        .kong {
            height: 250px;
            width: 100%;
        }

        h2 img {
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 用组件的方式写静态页面 -->
    <div id="app">
        <div class="img">
            点击的图片为:
            <h2>
                <img :src="imgUrl" alt="">
            </h2>
        </div>
        <div class="kong"></div>
        <div class="main">
            <my-cpnone @imgone="changeImg" :list="list"></my-cpnone>
        </div>
    </div>
    <template id="myCpnOne">
        <div class="main-box">
            <div class="box" v-for="(item,index) in list " :key="item.id">
                <div class="box-content">
                    <p class="del"> {{ item.del }} </p>
                    <img :src="item.imagesUrl" alt="" @click="imgChange(index)">
                    <h3> {{ item.title }} </h3>
                    <div class="box-bottom">
                        <div class="price">
                            {{ item.price | newPrice }}
                            <span> {{ item.start }} </span>
                        </div>
                        <div class="box-new">
                            <p> {{ item.new }} </p>
                            <p> {{ item.like }} </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </template>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    list: [{
                            id: 1,
                            del: 'x',
                            imagesUrl: './img/a1.jpg',
                            title: '小米11 Ultra,开启影像新时代',
                            price: 5999,
                            start: '起',
                            new: '上新',
                            like: '看相似'

                        },
                        {
                            id: 2,
                            del: 'x',
                            imagesUrl: './img/a2.png',
                            title: '小米耳机 Ultra,开启影像新时代',
                            price: 49,
                            like: '看相似',

                        },
                        {
                            id: 3,
                            del: 'x',
                            imagesUrl: './img/a3.png',
                            title: '小身材也要大智慧',
                            price: 49,
                            start: '包邮',
                            like: '看相似',
                        },
                        {
                            id: 4,
                            del: 'x',
                            imagesUrl: './img/a4.jpg',
                            title: 'Note手机',
                            price: 999,
                            start: '起',
                            new: '满减',
                            like: '看相似',
                        },
                        {
                            id: 5,
                            del: 'x',
                            imagesUrl: './img/a5.png',
                            title: '剃须刀',
                            price: 9.9,
                            like: '看相似',
                        },
                        {
                            id: 6,
                            del: 'x',
                            imagesUrl: './img/a6.jpg',
                            title: '手表',
                            price: 299,
                            start: '起',
                            new: '上新',
                            like: '看相似',
                        },
                    ],

                    imgUrl: '',

                }
            },
            methods: {
                changeImg(val) {
                    this.imgUrl = val

                }
            },
            components: {
                'my-cpnone': {
                    template: '#myCpnOne',
                    props: ['list'],
                    data() {
                        return {

                        }
                    },
                    methods: {
                        imgChange(i) {
                            this.$emit('imgone', this.list[i].imagesUrl)
                        }
                    },
                    filters: {
                        newPrice(val) {
                            return '￥' + val.toFixed(2);
                        }
                    }
                },
            },
        })
    </script>
</body>

</html>